<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="d-flex a-center j-sb fixed-wrapper" style="height: 132upx;">
			<view class="d-flex" style="width:476upx;margin-left: 89upx;">
				<view class="search-wrap">
					<text style="color: #999999;" class="iconfont icon-search"></text>
				</view>
				<input class="custom-input" @change="searchForTitle" v-model="searchTitle" placeholder="请输入楼盘名或地址" type="text" />
			</view>
			<view>
				<text style="font-size: 48upx;color: #999999;margin-right: 19upx;" class="iconfont icon-dingweiweizhizuobiaoxianxing"></text>
				<!-- <text style="font-size: 48upx;color: #999999;margin-right: 30upx;" class="iconfont icon-pinglun2"></text> -->
			</view>
		</view>
		<!-- 轮播图 -->
		<view style="width: 100%;height: 176upx;"></view>
		<uni-swiper-dot :info="dataList" :dotsStyles="dotsStyles" :current="current" mode="rectangle" style="height: 360upx;">
			<swiper ref="swipperView" style="height: 360upx;" @change="change" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in adverList" :key="index">
					<view class="swiper-item">
						<image :src="item.image" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="d-flex j-sb" style="padding: 0 30upx;">
			<view class="" v-for="(item,index) in listData" :key="index" @tap="skipToOtherModule(item)">
				<view :style="[{color: item.iconColor}]" :class="['icon-item iconfont ' + item.iconSrc]" class="spe-size"></view>
				<text class="icon-text">{{item.title}}</text>
			</view>
		</view>
		<!-- 下拉 -->
		<sun-selector :dataList="dataList" @handleOnSwitch="handleOnSwitch"></sun-selector>
		<view :style="'height:' + scrollH + 'px;'">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="'height:' + scrollH + 'px;'">
				<view>
					<view class="estate-wrapper" v-if="estateList.length > 0">
						<view v-for="(item, index) in estateList" @longpress="highLightBackground(evt)" @tap="checkEstateDetail(item.id)"
						 :key="index" class="d-flex border-bottoms estate-item">
							<view class="d-flex a-center" style="margin-right: 46upx;">
								<image :src="item.thumb" mode="" style="height: 190upx;width: 240upx;border-radius: 8upx;"></image>
							</view>
							<view class="d-flex flex-column font-24" style="width: 350upx;color: #CCCCCC;margin-top: 30upx;">
								<text class="font-30" style="color: #333333;font-weight: bold;line-height: 30upx;">{{ item.title }}</text>
								<!-- <view class="single-row-over font-22" style="color: #757575;"> -->
								<text style="font-size: 28upx;color: red;line-height: 30upx;margin-top: 2px;">售价{{ item.price }}/m²</text>
								<!-- <text class="single-row-over font-22" style="color: #757575;">户型:{{ item.housetype }} | 建面:{{ item.jianzhuarea }}</text> -->
								<text class="single-row-over font-22" style="color: #757575;"> 建面:{{ item.jianzhuarea }}</text>
								<!-- </view> -->
								<view class="d-flex" style="margin-top: 3px;">
									<view class="tags tag-1">
										<text style="color: #C90A21;">{{ item.salestatus }}</text>
									</view>
									<text class="tags tag-2">
										<text style="color: #046BD1;">{{ item.housecate }}</text>
									</text>
								</view>
								<view class="font-24" style="color: #999999">
									<text>精装智宅</text>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="null-area">
						<text>未查询到数据</text>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-ui/uni-swiper-dot/uni-swiper-dot.vue"
	import sunSelector from '@/components/common/sun-selector.vue';
	import api from '@/common/lib/request.js';
	export default {
		data() {
			return {
				listData: [{
						title: "新盘",
						id: 1,
						iconSrc: "icon-ICON-",
						// iconColor: "#33ff88"
					},
					{
						title: "楼讯",
						id: 2,
						iconSrc: "icon-ICON-1",
						// iconColor: "#fbbd08"
					}, {
						title: "看房团",
						id: 3,
						iconSrc: "icon-ICON-2",
						// iconColor: "#33ff88"
					},
					{
						title: "商业地产",
						id: 149,
						iconSrc: "icon-ICON-3",
						// iconColor: "#fbbd08"
					}, {
						title: "海外地产",
						id: 150,
						iconSrc: "icon-ICON-4",
						// iconColor: "#33ff88"
					}
				],
				dataList: [{
						type: '区域',
						init: 0,
						list: [{
							name: '全部',
							value: ''
						}, {
							name: '昌平区',
							value: '昌平区'
						}, {
							name: '西城区',
							value: '西城区'
						}, {
							name: '通州区',
							value: '通州区'
						}, {
							name: '延庆区',
							value: '延庆区'
						}]
					},
					{
						type: '价格',
						init: 0,
						list: [{
							name: '全部',
							value: ''
						}, {
							name: '1万以下',
							value: '1万以下'
						}, {
							name: '1-2万',
							value: '1-2万',
						}, {
							name: '2-3万',
							value: '2-3万',
						}, {
							name: '3-4万',
							value: '3-4万',
						}, {
							name: '4-5万',
							value: '4-5万',
						}, {
							name: '5-6万',
							value: '5-6万',
						}, {
							name: '6-8万',
							value: '6-8万',
						}, {
							name: '8-10万',
							value: '8-10万',
						}, {
							name: '10万以上',
							value: '10万以上',
						}]
					},
					{
						type: '户型',
						init: 0,
						list: [{
							name: '全部',
							value: ''
						}, {
							name: '一室',
							value: '一室'
						}, {
							name: '两室',
							value: '两室'
						}, {
							name: '三室',
							value: '三室'
						}, {
							name: '四室',
							value: '四室'
						}, {
							name: '五室',
							value: '五室'
						}, {
							name: '五室以上',
							value: '五室以上'
						}]
					}
				],
				estateList: [],
				adverList: [],
				scrollH: 500,
				searchTitle: '',
				currentPageNo: 0,
				defaultCount: 10, //默认一次查询数量
				filterOptions: [],
				current: 0,
				dotsStyles: {
					width: 12,
					height: 12,
					selectedBackgroundColor: '#FFFFFF',
					selectedBorder: '1px solid #ffffff',
					bottom: 15,
					backgroundColor: 'rgba(255,255,255,0.5)',
					border: '#FFFFFF',
				}
			};
		},
		components: {
			sunSelector,
			uniSwiperDot
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.screenHeight - 88 - 180 - 45 - 50 - 5 - 60;
				}
			});
			this.initSearchCondition();
			this.initEstateList(0)
			this.initAdverList()
		},
		computed: {},
		methods: {
		    initSearchCondition() {
		        api.request({
					url: '/content/lpxx/searchCondition'
				}).then(response => {
                    this.dataList[0].list = response.position;
                    this.dataList[1].list = response.price;
                    this.dataList[2].list = response.houseType;
				})
			},
			skipToOtherModule(data) {
				uni.navigateTo({
					url:'/pages/index/more/more?title=' + data.title
				})
			},
			change(e) {
				this.current = e.detail.current;
			},
			handleOnSwitch(options) {
				this.filterOptions = options;
				this.currentPageNo = 0;
				this.estateList = [];
				this.initEstateList(0)
			},
			checkEstateDetail(id) {
				if (id) {
					uni.navigateTo({
						url: '/pages/estate/estateDetail/estateDetail?contentId=' + id
					})
				}
			},
			searchForTitle() {
				this.currentPageNo = 0;
				this.estateList = [];
				this.initEstateList(0)
			},
			initEstateList(pageNo) {
				let _this = this;
				pageNo = pageNo * 10;
				let options = {}
				if (this.filterOptions.length > 0) {
					options = {
						houseprice: this.filterOptions[1],
						housetype: this.filterOptions[2],
						selcity: this.filterOptions[0]
					}
				}
				api.request({
						url: '/content/lpxx',
						data: {
							siteId: 1,
							first: pageNo,
							count: _this.defaultCount,
							title: _this.searchTitle,
							...options
						}
					})
					.then(response => {
						if (response.length > 0) {
							_this.estateList = [..._this.estateList, ...response];
							_this.currentPageNo++
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			initAdverList() {
				let _this = this;
				api.request({
						url: '/lpxx/advertisement',
						data: {
							siteId: 1,
						}
					})
					.then(response => {
						_this.adverList = response
					})
					.catch(err => {
						console.log(err);
					});
			},
			highLightBackground(evt) {
				console.log(evt)
			},
			loadMore() {
				this.initEstateList(this.currentPageNo)
			}
		}
	};
</script>

<style scoped>
	.fixed-wrapper {
		position: fixed;
		padding-top: 44upx;
		top: 0;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 999;
	}

	.estate-wrapper {
		width: 750upx;
	}

	.estate-item {
		height: 240upx;
		width: 690upx;
		padding: 0 30upx;
	}

	.estate-item:hover {
		background-color: #e8e8e8;
	}

	.null-area {
		height: 320upx;
		line-height: 320upx;
		text-align: center;
	}

	.tags {
		font-size: 16upx;
		border-radius: 2upx;
		height: 26upx;
		line-height: 26upx;
		text-align: center;
	}

	.tag-1 {
		width: 50upx;
		background: rgba(242, 156, 159, .24);
		margin-right: 12upx;
	}

	.tag-2 {
		width: 96upx;
		background: rgba(136, 171, 218, .24);
	}

	.custom-input {
		width: 421upx;
		height: 55upx;
		background: #EEEEEE;
	}

	.uni-input-placeholder {
		font-size: 24upx;
		color: #999999;
	}

	.search-wrap {
		width: 55upx;
		height: 55upx;
		background: #EEEEEE;
		text-align: center;
	}

	.spe-size {
		text-align: center;
		font-size: 50upx;
		height: 35px;
	}
</style>
